<template>
  <div class="createPost-container">
    <el-form v-if="!infoLoading" ref="postForm" :model="postForm" class="form-container" label-width="170px">
      <div class="createPost-main-container">

        <h3>基本信息</h3>
        <el-table :data="[postForm]" border fit highlight-current-row>
          <el-table-column label="姓名" prop="xm" min-width="100" align="center" fixed />
          <el-table-column label="部门" prop="bm" min-width="100" align="center" fixed />
          <el-table-column label="岗位" prop="gw" min-width="100" align="center" fixed />
          <el-table-column label="岗位职级" prop="gwzj" min-width="100" align="center" fixed />
          <!-- <el-table-column label="基本工资" prop="jbgz" min-width="100" align="center" fixed />
          <el-table-column label="岗位津贴" prop="gwjt" min-width="100" align="center" />
          <el-table-column label="绩效奖金" prop="jxjj" min-width="100" align="center" />
          <el-table-column label="司龄工资" prop="slgz" min-width="100" align="center" />
          <el-table-column label="话费补助" prop="hfbz" min-width="100" align="center" />
          <el-table-column label="日常餐费补助" prop="rccfbz" min-width="150" align="center" />
          <el-table-column label="电脑补助" prop="dnbz" min-width="100" align="center" />
          <el-table-column label="其他补贴" prop="qtbt" min-width="100" align="center" />
          <el-table-column label="销售提成" prop="xstc" min-width="100" align="center" />
          <el-table-column label="奖励" prop="jl" min-width="100" align="center" />
          <el-table-column label="福利" prop="fl" min-width="100" align="center" />
          <el-table-column label="生日津贴" prop="srjt" min-width="100" align="center" />
          <el-table-column label="其他应补" prop="qtyb" min-width="100" align="center" />
          <el-table-column label="考勤扣款" prop="kqkk" min-width="100" align="center" />
          <el-table-column label="其他扣款" prop="qtkk" min-width="100" align="center" />
          <el-table-column label="应付工资" prop="yfgz" min-width="100" align="center" />
          <el-table-column label="社保个人缴费" prop="sbgrjf" min-width="150" align="center" />
          <el-table-column label="公积金个人缴费" prop="gjjgrjf" min-width="150" align="center" />
          <el-table-column label="子女教育" prop="znjy" min-width="100" align="center" />
          <el-table-column label="赡养老人" prop="sylr" min-width="100" align="center" />
          <el-table-column label="继续教育" prop="jxjy" min-width="100" align="center" />
          <el-table-column label="住房贷款利息支出" prop="zfdklxzc" min-width="150" align="center" />
          <el-table-column label="住房租金支出" prop="zfzjzc" min-width="150" align="center" />
          <el-table-column label="本月应交所得税" prop="byyjsds" min-width="150" align="center" />
          <el-table-column label="税后扣款" prop="shkk" min-width="100" align="center" />
          <el-table-column label="实发工资" prop="sfgz" min-width="100" align="center" fixed="right" />
          <el-table-column label="出差补助" prop="ccbz" min-width="100" align="center" fixed="right" /> -->
        </el-table>
        <!-- {{ postForm.details }} -->
        <h3>工资详情</h3>
        <el-row>
          <el-col v-for="(item,index) of postForm.details" :key="index" :span="6">
            <el-form-item :label="item.name">
              <template>
                {{ parseFloat(item.value) === 0?'-':parseFloat(item.value).toFixed(2) }}
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="24">
            <el-form-item label="姓名">
              <template>
                {{ postForm.xm }}
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="部门">
              <template>
                {{ postForm.bm }}
              </template>
            </el-form-item>
          </el-col>
        </el-row> -->
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'ArticleDetail',
  props: {
    infoid: {
      type: String,
      default: ''
    },
    timestamp: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      timestamp2: 0,
      dialogVisible: false,
      myHeaders: {},
      imageUrl: '',
      infoLoading: false,
      postForm: {},
      loading: false,
      deptOption: [],
      userOption: [],
      tempRoute: {},
      selectedId: 0,
      infoType: 0
    }
  },
  watch: {
    timestamp: {
      handler(val, oldVal) {
        console.log('val:' + val)
        this.getData(this.infoid)
      },
      immediate: true
    }
  },
  mounted() {
    this.myHeaders = {
      Authorization: 'Bearer ' + localStorage.getItem('token')
    }
  },
  created() {
    // Why need to make a copy of this.$route here?
    // Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
    // https://github.com/PanJiaChen/vue-element-admin/issues/1221
    this.tempRoute = Object.assign({}, this.$route)
  },
  methods: {
    getData(id) {
      if (id) {
        this.infoLoading = true
        this.$http
          .get('/api/busSalary/getDetailById?&id=' + id)
          .then(response => {
            this.infoLoading = false
            if (response.data.success === true) {
              console.log(response.data)
              this.postForm = response.data.result
            } else {
              console.log('获取失败:' + response.data.message)
              this.$message({
                message: '获取失败:' + response.data.message,
                type: 'error'
              })
            }
          })
          .catch(error => {
            console.log(error)
            this.infoLoading = false
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.createPost-container {
  position: relative;

  .createPost-main-container {
    // padding: 40px 45px 20px 50px;

    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .postInfo-container-item {
        float: left;
      }
    }
  }

  .word-counter {
    width: 40px;
    position: absolute;
    right: 10px;
    top: 0px;
  }
}

.article-textarea ::v-deep {
  textarea {
    padding-right: 40px;
    resize: none;
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #bfcbd9;
  }
}
</style>
